import React, { Component } from 'react';
import './nav.css';

import { Link } from 'react-router';

class NavLink extends Component {
  constructor() {
    super();
    this.state = {
      nav: [
        {
          path: '/test1',
          pageName: 'test1 Page'
        },
        {
          path: '/test2',
          pageName: 'test2 Page'
        }
      ]
    };
  }

  liClick(pageName) {
    console.log(pageName);
  }

  render() {
    return (
      <div className="nav">
        <div className="navLeft">
          <ul className="">
            {/* <li className="navItem">
              <Link to="/c4">TO Clock Page</Link>
            </li>
            <li className="navItem">
              <Link to="/">Index Page</Link>
            </li>
            <li className="navItem">nav</li>
            <li className="navItem">nav</li>
            <li className="navItem">nav</li> */}
            {this.state.nav.map((item, index) => (
              <li className="navItem" key={index} onClick={this.liClick.bind(this, item.pageName)}>
                <Link to={item.path}>{item.pageName}</Link>
              </li>
            ))}
          </ul>
        </div>
        <div className="navRight">{this.props.children}</div>
      </div>
    );
  }
}

export default NavLink;
